<%@ page import="bean.User" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="bean.Article" %>
<%@ page import="bean.Category" %>
<%@ page import="bean.Label" %>
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    User user=(User)session.getAttribute("user");
    ArrayList<Article> articleArrayList=(ArrayList<Article>)session.getAttribute("userArticles");
    ArrayList<Article> articleCollections=(ArrayList<Article>)session.getAttribute("userCollections");
    ArrayList<Article> articleLikes=(ArrayList<Article>)session.getAttribute("userLikes");
    ArrayList<Category> arrayCategories=(ArrayList<Category>)session.getAttribute("userCategories");
    ArrayList<Label> labels=(ArrayList<Label>)session.getAttribute("userLabels");
%>
<html>
<head>
    <title>个人中心</title>
    <link rel="stylesheet"  href="css/bootstrap.min.css"/>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script language="JavaScript" src="js/personalHomepage.js"></script>
    <link rel="stylesheet" href="css/personalHompage.css">
</head>
<body>
<%--    导航条--%>
    <div class="row">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <%--                    TBLOG标签--%>
                    <a class="navbar-brand" href="#">TBLOG</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <%--                    主页链接--%>
                    <ul class="nav navbar-nav">
                        <li><a href="websiteHomepage.jsp">首页🏠</a></li>
                        <%--                        下拉菜单--%>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                    <%--                     搜索栏--%>
                    <form class="navbar-form navbar-left">
                        <input type="text" id="searchContent" class="form-control" size="125" maxlength="200" placeholder="请输入您想查询的内容">
                        <div class="dropdown">
<%--                            搜索按钮--%>
                            <button id="dLabel" type="button" class="btn btn-danger" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                🔍
                                <span class="caret"></span>
                            </button>
    <%--                          博客，博主搜索--%>
                            <ul class="dropdown-menu" aria-labelledby="dLabel">
                                <button type="button" class="btn btn-default" onclick="searchKey()">关键字搜索</button>
                                <button type="button" class="btn btn-default" onclick="searchUser()">博主搜索</button>
                                <button type="button" class="btn btn-default" onclick="searchSubfield()">分栏专类搜索</button>
                                <button type="button" class="btn btn-default" onclick="searchLabel()">标签搜索</button>
                            </ul>
                        </div>
                    </form>
                    <%--                    链接--%>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="writeBlogPage.jsp">创作中心</a></li>
                        <%--                        下拉菜单--%>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="<%=user.getHeadPortrait().equals("")?"images/defaultHeadPortrait.jpg":user.getHeadPortrait()%>" alt="无法加载" class="img-circle" width="20px" height="20px"><span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="personalHompage.jsp">个人中心</a></li>
                                <li><a href="loginPage.jsp">账号设置</a></li>
                                <li><a href="findPasswordPage.jsp">找回密码</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="successPage.jsp">退出</a></li>
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
<br><br><br>
<%--        头像--%>
<div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-3">
        <img src="<%=user.getHeadPortrait().equals("")?"images/defaultHeadPortrait.jpg":user.getHeadPortrait()%>" id="headPortrait"alt="无法加载" class="img-circle" width="80px" height="80px" ondblclick="$('#headPortraitFile').click()">
        <span><%=user.getAccount()%></span><br>
        <input type="file" id="headPortraitFile" style="display: none"  name="upload"  accept="image/jpg,image/png,image/jpeg,image/bmp,image/gif,image/webp">
    </div>
</div>
<%--信息展示--%>
<div class="row">
    <div class="col-lg-2"></div>
    <div class="col-lg-1">
        <ul class="list-group" id="mySelect">
            <li class="list-group-item "   style="background-color: #E83737">个人资料</li>
            <li class="list-group-item "   style="background-color: white"><a style="text-decoration: none;color: black" href="<%=basePath%>myBlogPage.jsp">我的博客</a></li>
            <li class="list-group-item "   style="background-color: white"><a style="text-decoration: none;color: black" href="<%=basePath%>blogLabelPage.jsp">我的标签</a></li>
            <li class="list-group-item "   style="background-color: white"><a style="text-decoration: none;color: black" href="<%=basePath%>blogCategoryPage.jsp">分类专栏</a></li>
            <li class="list-group-item"    style="background-color: white"><a style="text-decoration: none;color: black" href="<%=basePath%>myCollection.jsp">我的收藏</a></li>
        </ul>
    </div>
    <div class="col-lg-6">
        <div class="show" id="s1">
            <div class="panel panel-default" id="myInformation">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-10"></div>
                        <button onclick="fillInformation()" class="btn btn-danger">修改信息</button><br>
                    </div>
                    <br><b>账号信息</b><hr><br>
                    <span>账号： </span><span id="account"><%=user.getAccount()%></span><br><br>
                    <span>昵称： </span><span id="screenName"><%=user.getScreenName().equals("")?"马上填写":user.getScreenName()%></span><br><br>
                    <span>姓名： </span><span id="name"><%=user.getName().equals("")?"马上填写":user.getName()%></span><br><br>
                    <span>性别： </span><span id="sex"><%=user.getSex().equals("")?"马上填写":user.getSex()%></span><br><br>
                    <span>签名： </span><span id="sign"><%=user.getSign().equals("")?"马上填写":user.getSign()%></span><br><br>
                    <span>年龄：</span><span id="age"><%=user.getAge()==0?"马上填写":user.getAge()%></span><br><br>
                    <span>生日： </span><span id="birthday"><%=user.getBirthday().equals("")?"马上填写":user.getBirthday()%></span><br><br>
                    <b>联系方式</b><hr><br>
                    <span>电话： </span><span id="phone"><%=user.getPhone().equals("")?"马上填写":user.getPhone()%></span><br><br>
                    <span>邮箱： </span><span><%=user.getEmail().equals("")?"马上填写":user.getEmail()%></span><br><br>
                    <span>地址： </span><span id="address"><%=user.getAddress().equals("")?"马上填写":user.getAddress()%></span><br><br>
                </div>
            </div>
        </div>
        <%--                            修改信息面板--%>
        <div class="hidden" id="s2">
            <div class="panel panel-default" id="updateInformation">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-9"></div>
                        <button onclick="recordInformation()" class="btn btn-danger">保存信息</button>
                        <button onclick="cancelInformation()" class="btn btn-danger">取消</button>
                    </div>
                    <b>账号信息</b><hr><br>
                    <form method="post" action="UpdateInformationServlet" id="updateForm">
                        <div class="row"><div class="col-lg-2"><span>账号： </span></div><div class="col-lg-4"><input id="myAccount" class="form-control input-sm" name="updateAccount" value="<%=user.getAccount().equals("")?"马上填写":user.getAccount()%>" readonly></div></div><br>
                        <div class="row"><div class="col-lg-2"><span>昵称： </span></div><div class="col-lg-4"><input id="myScreenName" class="form-control input-sm"  name="updateScreenName" value="<%=user.getScreenName().equals("")?"马上填写":user.getScreenName()%>"></div></div><br>
                        <div class="row"><div class="col-lg-2"><span>姓名： </span></div><div class="col-lg-4"><input id="myName" class="form-control input-sm" name="updateName" value="<%=user.getName().equals("")?"马上填写":user.getName()%>"></div></div><br>
                        <div class="row"><div class="col-lg-2"><span>性别： </span></div><div class="col-lg-4"><select id="mySex" name="updateSex" class="btn btn-default">
                            <option value="0">请选择</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select></div></div><br>
                        <div class="row"><div class="col-lg-2"><span>签名： </span></div><div class="col-lg-4"><input id="mySign" class="form-control input-sm" name="updateSign" value="<%=user.getSign().equals("")?"马上填写":user.getSign()%>"></div></div><br>
                        <div class="row"><div class="col-lg-2"><span>年龄：</span></div><div class="col-lg-4"><input id="myAge" class="form-control input-sm" name="updateAge" value="<%=user.getAge()==0?"马上填写":user.getAge()%>"></div> </div><br>
                        <div class="row"><div class="col-lg-2"><span>生日： </span></div><div class="col-lg-4"><input id="myBirthday" class="form-control input-sm" name="updateBirthday" placeholder="<%=user.getBirthday().equals("")?"马上填写":user.getBirthday()%>"></div></div><br>
                        <b>联系方式</b><hr><br>
                        <div class="row"><div class="col-lg-2"><span>电话： </span></div><div class="col-lg-4"><input id="myPhone" class="form-control input-sm" name="updatePhone" value="<%=user.getPhone().equals("")?"马上填写":user.getPhone()%>"></div></div><br>
                        <div class="row"><div class="col-lg-2"><span>邮箱： </span></div><div class="col-lg-4"><input id="myEmail" class="form-control input-sm"  name="updateEmail" value="<%=user.getEmail().equals("")?"马上填写":user.getEmail()%>" readonly></div></div><br>
                        <div class="row"><div class="col-lg-2"><span>地址： </span></div><div class="col-lg-4"><input id="myAddress" class="form-control input-sm" name="updateAddress" value="<%=user.getAddress().equals("")?"马上填写":user.getAddress()%>"></div></div><br>
                        <input type="text"  name="updateHeadPortrait" style="display: none" value="<%=user.getHeadPortrait()%>">
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3"></div>
</div>
<script type="text/javascript">
    <%--        换头像--%>
    $("#headPortraitFile").change(function (){
        let file=$(this)[0].files[0];
        let formData=new FormData();
        formData.append("upload",file);
        let index=file.name.lastIndexOf(".");
        let type=file.name.substring(index);
        if(type!==".jpg"&&type!==".png"&&type!==".gif"&&type!==".jpeg"&&type!=="bmp"&&type!=="webp"){
            alert("只能上传jpg,png,gif,jpeg,bmp,webp格式的图片！！");
            return;
        }
        $.ajax({
            url:"<%=basePath%>UploadPhotoServlet",
            data:formData,
            method:"post",
            processData: false,
            contentType: false,
            async:false,
            cache:false,
            success:function (data){
                alert("上传头像成功")
            },
            error:function (data){
                alert("头像上传失败");
            }
        })
        window.location.reload();
    })
    //切换修改信息
    function fillInformation(){
        document.getElementById("s1").className='hidden';
        document.getElementById("s2").className='show';
    }
    //取消修改信息
    function cancelInformation(){
        document.getElementById("s1").className='show';
        document.getElementById("s2").className='hidden';
    }
    //保存修改信息
    function recordInformation(){
        let screenName=document.getElementById("myScreenName").value;
        let birthday=document.getElementById("myBirthday").value;
        let sex=document.getElementById("mySex").value;
        let name=document.getElementById("myName").value;
        let phone=document.getElementById("myPhone").value;
        let age=document.getElementById("myAge").value;
        let phonePattern=/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
        let birthdayPattern=/^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/;
        let sexPattern=/^男$|^女$/;
        let namePattern=/^[\u4E00-\u9FA5]{2,4}$/;
        if(screenName===""){
            alert("网络昵称不能为空");
            return ;
        }else{
            if(birthday===""){
                alert("生日不能为空");
                return;
            }else{
                if(sex==="0"){
                    alert("性别不能为空");
                    return ;
                }else{
                    if(name===""){
                        alert("姓名不能为空");
                        return ;
                    }else{
                        if(phone===""){
                            alert("电话不能为空");
                            return ;
                        }else{
                            if(namePattern.test(name)){
                                    if(birthdayPattern.test(birthday)){
                                        if(phonePattern.test(phone)){
                                            document.getElementById("updateForm").submit();
                                            document.getElementById("fillInformation").className="hidden";
                                            document.getElementById("displayInformation").className="show";
                                        }else{
                                            alert("电话格式错误");
                                            return ;
                                        }
                                    }else{
                                        alert("生日格式错误，示例：1980-5-12或1988-05-04");
                                        return;
                                    }
                            }else{
                                alert("姓名格式错误");
                                return;
                            }
                        }
                    }
                }
            }
        }
    }
    //关键字搜索博客
    function searchKey(){
        let content=document.getElementById("searchContent").value;
        if(content===""){
            alert("搜索内容不能为空");
        }else{
            $.ajax(
                {
                    data: {'searchArticleContent': content},
                    dataType: 'text',
                    type: 'post',
                    url: '<%=basePath%>SearchKeyServlet',
                    success: function () {
                        window.location = "<%=basePath%>searchResultPage.jsp";
                    },
                    error: function () {
                        alert("查询失败");
                    }
                }
            );
        }
    }
    /*搜索博主*/
    function searchUser(){
        let content=document.getElementById("searchContent").value;
        if(content===""){
            alert("搜索内容不能为空");
        }else{
            $.ajax(
                {
                    data: {'searchArticleUser': content},
                    dataType: 'text',
                    type: 'post',
                    url: '<%=basePath%>SearchUserServlet',
                    success: function () {
                        window.location = "<%=basePath%>searchUserPage.jsp";
                    },
                    error: function () {
                        alert("查询失败");
                    }
                }
            );
        }
    }
    /*标签搜索*/
    function searchLabel(){
        let content=document.getElementById("searchContent").value;
        if(content===""){
            alert("搜索内容不能为空");
        }else{
            $.ajax(
                {
                    data: {'searchArticleLabel': content},
                    dataType: 'text',
                    type: 'post',
                    url: '<%=basePath%>SearchLabelServlet',
                    success: function () {
                        window.location = "<%=basePath%>searchResultPage.jsp";
                    },
                    error: function () {
                        alert("查询失败");
                    }
                }
            );
        }
    }
    /*搜索分类专栏*/
    function searchSubfield(){
        let content=document.getElementById("searchContent").value;
        if(content===""){
            alert("搜索内容不能为空");
        }else{
            $.ajax(
                {
                    data: {'searchArticleSubfield': content},
                    dataType: 'text',
                    type: 'post',
                    url: '<%=basePath%>SearchSubfieldServlet',
                    success: function () {
                        window.location = "<%=basePath%>searchResultPage.jsp";
                    },
                    error: function () {
                        alert("查询失败");
                    }
                }
            );
        }
    }
</script>
</body>
</html>

